<template>
  <el-container style="height:100%;">
    <el-header
      style="line-height: 60px;text-align: start;background-color: #ccc;"
    >{{$t('access.access')}}</el-header>
    <el-main style="width: 98%;">
      <div class="access-datasource-add-header">
        <div class="access-add-toolbar">
          <div id="arrow_div" @click="backToDsList">
            <img id="arrow_img" src="../images/arrow.png" />
            <p>
              <span id="arrow_text">{{$t('access.back')}}</span>
            </p>
          </div>
        </div>
      </div>
      <div class="access-add-datasource-list">
        <div class="access-form">
          <div class="access-form-title">
            <span>{{$t("access.basic_ds")}}</span>
          </div>
          <el-row :gutter="30">
            <el-form ref="elForm" :model="rsData" :rules="rules" size="medium" label-width="100px">
              <el-col :span="4">
                <el-row>
                  <div class="datasource-img" @click="add('mysql')">
                    <img src="../images/mysql.png" />
                  </div>
                  <div class="datasource-type">
                    <p>
                      <span>MySql</span>
                    </p>
                  </div>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <div class="datasource-img" @click="add('sqlserver')">
                    <img src="../images/sqlserver.png" />
                  </div>
                  <div class="datasource-type">
                    <p>
                      <span>SQL Server</span>
                    </p>
                  </div>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <div class="datasource-img" @click="add('oracle')">
                    <img src="../images/oracle.png" />
                  </div>
                  <div class="datasource-type">
                    <p>
                      <span>Oracle</span>
                    </p>
                  </div>
                </el-row>
              </el-col>
            </el-form>
          </el-row>
        </div>

        <div class="access-form">
          <div class="access-form-title">
            <span>{{$t("access.mpp_ds")}}</span>
          </div>
          <el-row :gutter="30">
            <el-form ref="elForm" :model="rsData" :rules="rules" size="medium" label-width="100px">
              <el-col :span="4">
                <el-row>
                  <div class="datasource-img">
                    <img src="../images/mpp.png" />
                  </div>
                  <div class="datasource-type">
                    <p>
                      <span>MPP</span>
                    </p>
                  </div>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <div class="datasource-img">
                    <img src="../images/mpp.png" />
                  </div>
                  <div class="datasource-type">
                    <p>
                      <span>MPP</span>
                    </p>
                  </div>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <div class="datasource-img">
                    <img src="../images/mpp.png" />
                  </div>
                  <div class="datasource-type">
                    <p>
                      <span>MPP</span>
                    </p>
                  </div>
                </el-row>
              </el-col>
              <el-col :span="4">
                <el-row>
                  <div class="datasource-img">
                    <img src="../images/mpp.png" />
                  </div>
                  <div class="datasource-type">
                    <p>
                      <span>MPP</span>
                    </p>
                  </div>
                </el-row>
              </el-col>
              <!-- <el-col :span="4">
                <el-row gutter="15"></el-row>
              </el-col>-->
            </el-form>
          </el-row>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      rsData: {},
      rules: {}
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    backToDsList() {
      debugger;
      this.$router
        .push({
          path: "/",
          query: {}
        })
        .catch(data => {});
    },
    add(type) {
      this.$router
        .push({
          path: "/editdatasource",
          query: {
            type: type
          }
        })
        .catch(data => {});
    }
  }
};
</script>
<style>
.access-datasource-add-header {
  width: 100% !important;
  height: 40px !important;
  margin-top: -12px;
}
.access-add-toolbar {
  line-height: 60px;
  text-align: start;
  height: 40px;
  width: 98%;
}
#arrow_div {
  border-width: 0px;
  position: absolute;
  left: 20px;
  width: 70px;
  height: 31px;
  cursor: pointer;
}
#arrow_img {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 6px;
  width: 71px;
  height: 28px;
}
#arrow_text {
  border-width: 0px;
  position: absolute;
  left: 8px;
  width: 66px;
  line-height: 10px;
  word-wrap: break-word;
}
.access-add-datasource-list {
  height: 90%;
  padding-left: 10px;
}
.access-add-datasource-list .el-col {
  height: 200px;
  background: #eaedf1;
  margin-left: 10px;
  border: 1px solid #42424205;
}
.access-form {
  margin-top: 10px;
  margin-bottom: 20px;
}

.access-form-title span {
  font-weight: bolder;
}
.datasource-img {
  height: 160px;
}
.datasource-img img {
  width: 100%;
  height: 140px;
  padding-top: 10px;
}
.datasource-type {
  text-align: left;
  padding-left: 8px;
}

.datasource-type p {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #333333;
  text-align: left;
  line-height: normal;
}
span {
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #333333;
  text-align: center;
  line-height: normal;
}
</style>
